// 实现函数方法调用渲染message组件

// 1.引入createVNode render 函数
// 2.引入Message组件
// 3.手动创建一个div标签元素 作为将来messge组件挂载的位置  并且把这个div 添加到body中
// 4.通过createVNode把message传入创建虚拟dom节点
// 5.通过render函数把虚拟dom节点挂载到div上\

// 弹框展示之后开启一个定时器 如果时间到达 销毁弹框
// 销毁弹框: render函数传进入一个null

import { createVNode, render } from 'vue'
import Message from './index.vue'

const div = document.createElement('div')
div.setAttribute('class', 'xtx-message-container') // 样式
document.body.appendChild(div)

// 申明一个定时器存放的位置
let timer = null
function message ({ type, text, time = 2000 }) {
  const messegeVnode = createVNode(Message, { type, text })
  render(messegeVnode, div)
  clearTimeout(timer)
  // 开启定时器
  timer = setTimeout(() => {
    // 2s之后销毁
    render(null, div)
  }, time)
}

export default message
